<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>gcc会员注册页面</title>
	<%--静态包含base标签，css样式，JQuery文件--%>
	<%@include file="/pages/common/head.jsp"%>
	<script type="text/javascript">
		$(function () {

			$("#username").blur(function () {

				//获取用户名
				var username=this.value;
				$.getJSON("http://localhost:8080/books/userServlet","action=ajaxExistsUsername&username="+username,function (data) {
					if(data.existUsername)
					{
						$("span.errorMsg").text("用户名不合法！")
					}
					else
					{
						$("span.errorMsg").text("用户名可用")
					}
				})
			});
			//给验证码的图片绑定单击事件
			$("#codeimg").click(function () {
			//在事件响应的function函数中有一个this对象，这个this对象，是当前正在响应的事件的dom对象
			//src属性表示验证码img标签的 图片路径。它可读，可写。
				this.src="${basePath}kaptcha.jpg?date="+new Date().getTime();
			})
			//给注册绑定单击事件
			$("#sub_btn").click(function () {
				//验证用户名：必须由字母，数字，下划线组成，长度5-12
				//获取用户名输入框的内容 创建正则表达式对象 使用test方法验证，提示用户结果
				var usernametxt=$("#username").val();
				var usernamePatt=/^\w{5,12}$/;
				if(!usernamePatt.test(usernametxt))
				{
					$(".errorMsg").text("用户名不合法");
					return false;
				}
				else
				{
					$(".errorMsg").text("");
				}
				//验证密码 步骤与验证用户名相同
				var passwordtxt=$("#password").val();
				var passwordPatt=/^\w{5,12}$/;
				if(!passwordPatt.test(passwordtxt))
				{
					$(".errorMsg").text("密码不合法");
					return false;
				}
				else
				{
					$(".errorMsg").text("");
				}
				//验证确认密码
				//获取确认密码内容 和密码进行比较 提示用户
				var repTxt=$("#repwd").val();
				if(repTxt!=passwordtxt)
				{
					$(".errorMsg").text("确认密码和密码不一致！");
					return false;
				}
				//验证邮箱
				//获取邮箱内容 创建正则表达式对象 使用test方法验证是否合法 提示用户
				var emailtxt=$("#email").val();
				var emailPatt=/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
				if(!emailPatt.test(emailtxt))
				{
					$(".errorMsg").text("邮箱格式不合法！");
					return false;
				}
				//验证码
				var codeTxt =$("#code").val();
				//去掉验证码前后空格
				codeTxt=$.trim(codeTxt);
				if(codeTxt==null||codeTxt=="")
				{
					$(".errorMsg").text("邮箱格式不合法！");
					return false;
				}
			})
		});
	</script>
	<style type="text/css">
		.login_form{
			height:420px;
			margin-top: 25px;
		}

	</style>
</head>
<body>
<div id="login_header">
<%--	<img class="logo_img" alt="" src="static/img/logo.gif" >--%>
</div>

<div class="login_banner">

	<div id="l_content">
		<span class="login_word">欢迎注册</span>
	</div>

	<div id="content">
		<div class="login_form">
			<div class="login_box">
				<div class="tit">
					<h1>注册gcc会员</h1>
					<span class="errorMsg">
<%--						<%=request.getAttribute("msg")==null?"":request.getAttribute("msg")%>--%>
						${requestScope.msg}
					</span>
				</div>
				<div class="form">
					<form action="userServlet"  method="post">
						<input type="hidden" name="action" value="regist"/>
						<label>用户名称：</label>
						<input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1"
							   value="${requestScope.username}"
							   name="username" id="username" />
						<br />
						<br />
						<label>用户密码：</label>
						<input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1"
							    name="password" id="password" />
						<br />
						<br />
						<label>确认密码：</label>
						<input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1"
							    name="repwd" id="repwd" />
						<br />
						<br />
						<label>电子邮件：</label>
						<input class="itxt" type="text" placeholder="请输入邮箱地址" autocomplete="off" tabindex="1"
							   value="${requestScope.email}"
							   name="email" id="email" />
						<br />
						<br />
						<label>验证码：</label>
						<input class="itxt" type="text"  name="code" style="width: 100px; height: 10px;" id="code"/>
						<img  id="codeimg"alt="" src="kaptcha.jpg" style="float: right; margin-right: 40px; width: 110px; height: 30px;">
						<br />
						<br />
						<input type="submit" value="注册" id="sub_btn" />

					</form>
				</div>

			</div>
		</div>
	</div>
</div>
<%--静态包含页脚内容--%>
<%@include file="/pages/common/footer.jsp"%>
</div>
</body>
</html>